import React, { Component,Fragment } from 'react'
import { Form, Input, Button } from 'antd'
import {toLoginAsync} from '../../store/user/actionCreators'
import { connect } from 'react-redux'

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
}
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
}
class Login extends Component {
  render() {
    return (
      <Fragment>
        <div style={{width:'80%',margin:'0 auto',paddingTop:100}}>
          <Form
              {...layout}
              name="basic"
              initialValues={{
                remember: true,
              }}
              onFinish={this.toLogin}
            > 
              {/* 用户名 */}
              <Form.Item
                label="用户名"
                name="username"
                rules={[
                  {
                    required: true,
                    message: '请输入用户名!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
             {/* 密码 */}
              <Form.Item
                label="密码"
                name="pwd"
                rules={[
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>
             {/* 表单提交 */}
              <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
        </div>
      </Fragment>
    )
  }
  toLogin = (values) => {
    let fromUrl = '/admin/dashBoard'
    if(this.props.location.state){
      fromUrl = this.props.location.state.from
    }
    this.props.toLogin(values,fromUrl)
  }
}
const mapStateToProps = (state) => {
  return {

  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    toLogin: (params,fromUrl) => {
      dispatch(toLoginAsync(params,fromUrl))
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Login)